<template>
    <!-- 布局 -->
    <div class="box">
        <!-- 版心 -->
        <div class="banner">
            <!-- 左边部分 -->

            <!-- 右边部分 -->
            <div class="box_right">
                <div class="first">
                    <p class="fp">地址管理</p>
                    <button class="fbtn"><router-link to="/user/address_children" >添加新地址</router-link></button>
                </div>
                <div class="second">
                    暂无地址
                </div>
                <div class="bag-bottom">
                    <img src="../../public/images/user/bag.jpg" alt="">
                    <div class="texts">
                        <p>来AIBU，一起爱步一下</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from "vue"
// 省市区的3级联动功能
const place = reactive({
    provinces: ["江西", "湖南"],
    citys: [
        ['江西1', '江西2', '江西3'],
        ['湖南1', '湖南2', '湖南3'],
    ],
    areas: [
        [
            ['江西1-1', '江西1-2'],
            ['江西2-1', ' 江西2-2'],
            ['江西3-1', ' 江西3-2'],
        ],
        [
            ['湖南1-1', '湖南1-2'],
            ['湖南2-1', ' 湖南2-2'],
            ['湖南3-1', ' 湖南3-2'],
        ]
    ]
})

// 获取省 市 区份的下标
let pro_index = 0;
let city_index = 0;
let area_index = 0;
// 生成添加option元素
function createOptions(el, vari, index) {
    for (let i = 0; i < vari.length; i++) {
        let option = new Option()
        option.value = vari[i]
        option.innerText = vari[i]
        el.appendChild(option)
    }
}
// 省市 省区联动
function handleProvin(e) {
    pro_index = e.target.selectedIndex
    // 清空市区内的内容
    el_place.value[1].innerHTML = ""
    el_place.value[2].innerHTML = ""
    createOptions(el_place.value[1], place.citys[pro_index], pro_index)
    createOptions(el_place.value[2], place.areas[pro_index][0])
}
// 市区联动
function handleCity(e) {
    area_index = e.target.selectedIndex
    // 清空市区内的内容
    el_place.value[2].innerHTML = ""
    createOptions(el_place.value[2], place.areas[pro_index][area_index])
}

// 获取:ref=placeRef元素
let el_place = ref([])
const placeRef = (el) => {
    el_place.value.push(el)
}


</script>

<style lang="less">
* {
    margin: 0;
    padding: 0;
}

.box {
    background-color: #F7F8FA;
}


.box_left {
    display: flex;
    flex-direction: column;
}

.box_left a {
    text-decoration: none;
    cursor: pointer;
    color: #000;
    width: 140px;
    margin-bottom: 20px
}

// .box_right {
//     width: 1220px;
// }

.first {
    display: flex;
    justify-content: space-between;
}

.fp {
    color: #000;
    font-size: 24px;
}

.fbtn {
    width: 200px;
    height: 40px;
    background: #000;
    color: white;
    cursor: pointer;

    a {
        text-decoration: none;
        color: white;
    }
}

.second {
    color: #000;
    font-weight: lighter;
    padding: 30px;
    margin-top: 30px;
    font-size: 16px;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.bag-bottom {
    width: 1220px;
    height: 378px;
    position: relative;
    margin-top: 20px;
}

.bag-bottom img {
    width: 1220px;
}

.texts {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.texts p {
    color: white;
    font-weight: lighter;
    font-size: 20px;
}

.banner2 {
    width: 1520px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}


.p11 {
    line-height: 18px;
    font-weight: 600;
    color: #000;
}

.p22 {
    color: #515151;
    margin-top: 8px;
}
</style>